﻿<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/font-awesome.css">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0
			}
			
			ul,
			li {
				list-style: none;
			}
			
			#box {
				width: 810px;
				height: 320px;
				position: relative;
				overflow: hidden;
			}
			
			#ul {
				width: 810px;
				height: 1600px;
				position: absolute;
			}
			
			#ul li {
				width: 810px;
				height: 320px;
				float: left;
			}
			
			#nav {
				width: 30px;
				height: 320px;
				position: absolute;
				top: 0px;
				right: 0px;
				background: #222;
				opacity: 0.5;
			}
			
			#nav li {
				display: block;
				margin-bottom: 50px;
				margin-left: 5px;
				width: 20px;
				height: 20px;
				background: #fff;
				border-radius: 50%;
			}
			
			#nav .active {
				background: mediumspringgreen;
			}
			#all{
				width:100%;height:100%;
			}
		</style>
		<script src="js/move.yintao1.05.js"></script>

		<script>
			window.onload = function() {
				var box = document.getElementById("box");
				var ul = document.getElementById("ul");
				var lilist = document.getElementById("nav").children;
				var index = 0;
				box.onmouseover = function(e) { //鼠标划入图片，关闭开始的定时器
					var e = e || event;
					clearInterval(t);
					return;
				}
				box.onmouseout = function() {
					t = setInterval(function() { //鼠标划出开启的定时器
						animate(ul, { top: -320 * ++index }, {
							callback: function() {

								if(index >= 4) {
									ul.style.top = 0;
									index = 0;
								}
							}
						});
						var _index = index >= 4 ? 0 : index;
						for(var i = 0; i < lilist.length; i++) {
							lilist[i].className = "";
						}
						lilist[_index].className = "active";
						console.log("这是鼠标划出的定时器", "_index" + _index, "index" + index);
					}, 2000)
				}
				var t = setInterval(function() { //鼠标划出以及页面刚加载时的定时器

					animate(ul, { top: -320 * ++index }, {
						callback: function() {
							if(index >= 4) {
								ul.style.top = 0;
								index = 0;
							}
						}
					});
					var _index = index >= 4 ? 0 : index;
					for(var i = 0; i < lilist.length; i++) {
						lilist[i].className = "";
					}
					lilist[_index].className = "active";
					console.log("这是鼠标起始的定时器", "_index" + _index, "index" + index);
				}, 2000)

				/**
				 设置小球 */

				for(var i = 0; i < lilist.length; i++) {
					lilist[i].index = i;
					lilist[i].onclick = function() { //给每一个li添加单击事件
						for(var i = 0; i < lilist.length; i++) { //鼠标单击所有小球颜色变为原来颜色
							lilist[i].className = "";
						}
						index = this.index
						this.className = "active"; //给单击的小球添加颜色
						animate(ul, { top: -320 * this.index }); //单击切换图片
					}.bind(lilist[i]);
				}
				
				var ps = document.getElementsByClassName("progress-bar")[0];//小飞机
				var ps1 = document.getElementsByClassName("progress")[0];
				
				if(window.getComputedStyle(ps,null).width < "700"){
					box.style.display = "none";
					nav.style.display = "none";
					title.style.display = "none";
				}					
				console.log(getComputedStyle(ps,null).width<= "700")
				animate(ps,{ width: 700 },{callback:function(){
					box.style.display = "block";
					nav.style.display = "block";
					title.style.display = "block";
					ps1.style.display = "none";
				}})
			}
		</script>
	</head>

	<body>
			<div id="box">
				<ul id="ul">
					<li><img src="images/001.jpg" /></li>
					<li><img src="images/002.jpg" /></li>
					<li><img src="images/003.jpg" /></li>
					<li><img src="images/004.jpg" /></li>
					<li><img src="images/001.jpg" /></li>
				</ul>
				<ul id="nav">
					<li class="active" style="margin-top:30px"></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div id="title" style="color:red;margin:100px;">
				请等待运动结束后再单击小球~~~
			</div>
		<div class="progress" style="width:700px;margin:100px auto">
			<div class="progress-bar" style="width: 0%; background:#d9534f;">
				<span style="font-size:12px;width:120px;color:red;";>正在加载,请您稍后</span>
			</div>
		</div>
	</body>

</html>